<template>
  <div class="login-container">
    <img src="../img/333.png" alt="" class="school" />
    <el-form ref="form" :model="form" :rules="rules" class="login-page">
      <h2 class="title" style="margin-bottom: 20px">用户注册</h2>
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="请输入密码"  show-password clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="confirm">
        <el-input
          v-model="form.confirm"
          placeholder="请再次确认密码"
          clearable
          show-password
        >
          <template #prefix>
            <el-icon class="el-input__icon"><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="role">
        <el-radio v-model="form.role" :label="2">用户</el-radio>
        <el-radio v-model="form.role" :label="3">教学管理员</el-radio>
        <el-radio v-model="form.role" :label="4">运动管理员</el-radio>
        <el-radio v-model="form.role" :label="5">活动管理员</el-radio>
        <el-radio v-model="form.role" :label="1">超级管理员</el-radio>
      </el-form-item>

      <el-form-item prop="phone">
        <el-input
          v-model="form.phone"
          placeholder="请输入手机号"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="form.address"
          placeholder="请输入地址"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-radio v-model="form.sex" label="男">男</el-radio>
        <el-radio v-model="form.sex" label="女">女</el-radio>
      </el-form-item>

      <el-form-item prop="authorize" v-if="form.role != 2">
        <el-input
          v-model="form.authorize"
          placeholder="请输入管理员注册码"
          clearable
          show-password
        >
          <template #prefix>
            <el-icon class="el-input__icon"><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <div style="display: flex">
          <el-input
            v-model="form.validCode"
            style="width: 45%"
            placeholder="请输入验证码"
          ></el-input>
          <ValidCode @input="createValidCode" style="width: 50%" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="register">注 册</el-button>
      </el-form-item>
      <el-form-item>
        <!-- <el-button type="text" @click="$router.push('/login')">前往登录>> -->
          <el-button type="primary" style="width: 100%" @click="$router.push('/login')">登录</el-button>
      </el-form-item>
      </el-form>
  </div>
</template>

<script>
import request from "../utils/request";
import { ElMessage } from "element-plus";
import ValidCode from "../components/Validate";
export default {
  name: "Login",
  components: {
    ValidCode,
  },
  data() {
    return {
      form: {
        role: 2,
        phone: "",
      },
      validCode: "",
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 13,
            message: "长度要求为2到13位",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        confirm: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur",
          },
        ],
        authorize: [
          {
            required: true,
            message: "请输入注册码",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("手机号不能为空"));
              }
              // 简单的手机号正则校验
              const reg = /^1[3-9]\d{9}$/;
              if (!reg.test(value)) {
                return callback(new Error("请输入有效的手机号"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    createValidCode(data) {
      this.validCode = data;
    },
    register() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!this.form.validCode) {
            ElMessage.error("请填写验证码");
            return;
          }
          if (
            this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()
          ) {
            ElMessage.error("验证码错误");
            return;
          }
          if (this.form.password != this.form.confirm) {
            ElMessage.error("两次密码输入不一致");
            return;
          }
          if (
            [3, 4, 5].includes(this.form.role) &&
            this.form.authorize != "1234"
          ) {
            ElMessage.error("请输入正确的注册码");
            return;
          }
          if (this.form.role == 1 && this.form.authorize != "4321") {
            ElMessage.error("请输入正确的注册码");
            return;
          }
          request.post("user/register", this.form).then((res) => {
            console.log(res, "res");
            if (res.status == 200) {
              ElMessage.success("注册成功");
              this.$router.push("/login");
            } else {
              ElMessage.error(res.message);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.login-container {
  position: fixed;
  width: 100%;
  height: 100%;
    background: url('../img/111.jpg') no-repeat center center;
  background-size: cover;
  display: flex; /* 使用 Flexbox */  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
}
.login-page {
  border-radius: 5px;
  margin: 180px auto;
  width: 430px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.school {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 100px;
}
.title {  
  text-align: center; /* 使文本居中 */  
  margin-bottom: 20px; /* 保留下方边距 */  
  width: 100%; /* 确保标题占据全部宽度 */  
}  
</style>